<template>
	<view id="home">
		
		<mescroll-uni :down="downOption" @down="downCallback" @up="upCallback" :up="upOption">
			<!-- 通知栏 -->
			<uni-notice-bar :scrollable="true" :show-icon="true" :speed="50"
			background="linear-gradient(180deg,rgba(236,199,123,1) 0%,rgba(216,179,107,1) 100%)"
			color="#000" :text="succeedList"
			></uni-notice-bar> 
			 
			<!-- 轮播图 -->
			<swiper class="screen-swiper round-dot margin" :indicator-dots="true" :circular="true" indicator-color="#fff" v-if="bannerList.length!==0"
			 :autoplay="true" interval="5000" duration="500" indicator-active-color="#D8B36B"
			 style="box-shadow:0px 4upx 20upx rgba(100,66,0,0.6);">
				<swiper-item class="radius" v-for="(item,index) in bannerList" :key="item.id" @click="webview(item.return_url)">
					<image :src="!item.image?'/static/image/errorImg.svg':item.image" mode="aspectFill" :lazy-load="true" :id="index" @error="bannerError"></image>
				</swiper-item>
			</swiper>
			    
			<!-- 列表 -->  
			<view class="cu-list menu">
				<view class="cu-item" style="padding-bottom:20upx;">
					<view class="flex flex-direction justify-center" style="">
						<view class="text-lg" style="font-weight: 500;padding-bottom:4upx;">莱恩钢琴艺术培训</view>
						<view class="text-gray text-sm">彭州市金彭东路200号</view>
					</view>
					<navigator class="action flex flex-direction align-center justify-center" url="/pages/map/map">
						<view>
							<text class="iconfont iconlocation text-orange" style="font-size: 40upx;"></text>
						</view>
						<view class="text-sm">导航</view> 
					</navigator>
				</view>  
			</view>
			 
			<view style="padding:10upx 0;background-color: #f1f1f1;"></view>
			  
		    <view class="text-orange text-xl padding-lr padding-top">全部课程</view>
			
			<!-- 卡片 -->
			<navigator v-for="(item,index) in coursesList" :key="item.id" class="cu-card article no-card" 
			:url="'/pages/course/course?courseId='+item.id">
				<view class="cu-item shadow padding-top solid-bottom">
					<view class="content">
						<image :src="item.image==null||item.image==''?'/static/image/errorImg.svg':item.image" :lazy-load="true"
						 mode="aspectFill" style="min-width: 268upx;height: 200upx;" :id="index" @error="imgError"></image>	
						
						<view class="desc">
							<view class="flex align-center">
								<view class="padding-right-sm text-xl text-cut" style="max-width: 400upx;">{{item.course_name}}</view>
							</view>
							<view>
								<text>{{!item.teacher.teacher_name?'未知姓名':item.teacher.teacher_name}}</text>
								<text v-if="item.teacher.level">.{{item.teacher.level}}</text>
								<text v-else></text>
							</view>
							<view class="text-sm two-omit" style="color:#666;" v-text="item.description==null?'暂无描述':item.description"></view>
							<view class="flex align-center justify-between">
								<my-tag :tag="item.tag"></my-tag>
								<view class="text-right text-price text-red" style="font-size:40upx;">{{item.unit_price}}</view>
							</view>
						</view>
					</view>
				</view>
			</navigator>
		</mescroll-uni>
		
	</view>
</template> 

<script>
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'	//通告栏组件
	import myTag from '@/components/my-tag.vue';	//自定义标签组件
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";	//下拉刷新上拉加载组件
	  
	import {mapState} from 'vuex'
	export default {
		components: {
			uniNoticeBar,
			myTag,
			MescrollUni
		},
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				upOption:{
					empty:{
						tip: '~ 空空如也 ~', // 提示
						icon: '/static/image/queshengtu.svg'
					}
				},
				coursesList: [],	//课程列表
				bannerList: []	//banner列表
			}
		},
		onLoad() {
			// banner列表
			this.getBanner()
			
			// 报名成功人员信息
			this.getSucceed()
			
			// 课程分类
			// this.getCourseCategory()
		}, 
		methods: {
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				console.log('下拉刷新了', mescroll);
				
				this.getBanner()
				this.getSucceed()
				
				// 第2种: 下拉刷新和上拉加载调同样的接口,直接用mescroll.resetUpScroll()代替
				mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			async upCallback(mescroll) {
				console.log('上拉加载了', mescroll);
				
				// 此时mescroll会携带page的参数:
				let pageNum = mescroll.num; // 页码, 默认从1开始
				let pageSize = mescroll.size; // 页长, 默认每页10条
				
				// 课程列表
				let res = await this.$api.courses({page: pageNum, page_size: pageSize})
				if(res.statusCode === 200){
					console.log('课程列表', res.data.data)
					
					// 接口返回的当前页数据列表 (数组)
					let curPageData = res.data.data
					
					// 接口返回的总条数
					let totalSize = res.data.meta.total
					
					//设置列表数据
					if(mescroll.num == 1) this.coursesList = []; //如果是第一页需手动置空列表
					this.coursesList = this.coursesList.concat(curPageData); //追加新数据
					
					// 成功隐藏下拉加载状态
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					mescroll.endBySize(curPageData.length, totalSize); 
												
					// this.$store.dispatch('sendCourses', res.data.data)
				}
			}, 
			// banner列表
			async getBanner(){
				let res = await this.$api.banner()
				if(res.statusCode === 200){
					console.log('banner列表', res.data.data)
					
					this.bannerList = res.data.data
					// this.$store.dispatch('sendBanner', res.data.data)
				}
			},
			// 报名成功人员信息
			async getSucceed(){
				let res = await this.$api.succeed()
				if(res.statusCode === 200){
					console.log('报名成功人员信息', res.data.data)
					
					let str = ''
					res.data.data.forEach(item => {
						str += `　　　　　　　　　　　　　　　　　　　　　　　　　${item.username} ${item.phone} ${item.course_name} ${item.describe}　　　　　　　　　　　　　　　　　　　　　　`
					})
					this.$store.dispatch('sendSucceed', str)
				}
			},
			// 课程分类
			// async getCourseCategory(){
			// 	let res = await this.$api.courseCategory()
			// 	if(res.statusCode === 200){
			// 		console.log('课程分类', res.data.data)
					
			// 		this.$store.dispatch('sendCourseCategory', res.data.data)
			// 	}
			// },
			// 图片加载失败
			imgError: function (e) {
				let errorImgIndex = e.currentTarget.id
				this.coursesList[errorImgIndex].image = '/static/image/errorImg.svg'
			},
			webview(url){
				console.log(url);
				if(url.substr(0, 4) === 'mini'){
					url = url.replace(/mini:\/\//, '')
					uni.navigateTo({
						url: url
					})
				}else{
					uni.navigateTo({
						url: `/pages/webview/webview?url=${url}`
					})
				}
			},
			// banner图片加载失败
			bannerError: function (e) {
				let errorImgIndex = e.currentTarget.id
				this.bannerList[errorImgIndex].image = '/static/image/errorImg.svg'
			}
		},
		computed: {
			...mapState(['succeedList']),
		}
	}
</script>
 
<style lang="scss">
	#home{
		height:100%;
		background-color: $uni-bg-color;
	}
</style>
